<template>
  <a-modal
    v-model:visible="visible"
    width="70vw"
    :title="'发票详情'"
    :title-align="'start'"
    :hide-cancel="true"
    :closable="false"
    @ok="handleOk"
  >
    <div style="height: 70vh">
      <table-container
        v-model:columns="columns"
        :loading="isLoading"
        :all-columns="allColumns"
        @refresh="getData"
      >
        <a-table
          style="margin-top: 16px"
          :columns="columns"
          :data="renderData"
          :loading="isLoading"
          row-key="1"
          :scroll="scroll"
          table-layout-fixed
        >
        </a-table>
      </table-container>
    </div>
  </a-modal>
</template>

<!--新script-->
<script lang="ts" setup>
  import { ref, defineEmits } from 'vue';
  import tableContainer from '@/common/components/table-container/index.vue';
  import { sleep } from '@/utils/tools';
  import lodash from 'lodash';
  import { tableRenderConfig } from './tableComp/baseTableConfig';

  const isLoading = ref(true);
  const tableObj = ref([]);
  const props = defineProps(['activeKey', 'list']);
  const scroll = {
    x: 2000,
    y: 200,
  };
  const renderData = ref<any[]>([]);
  const columns = ref([]);
  const gettableColums = () => {
    columns.value = [];
    const activeKeys = props.activeKey.slice(0, -1);
    const array = Object.entries(activeKeys).map(([key, value]) => [
      parseInt(key, 10),
      value,
    ]);
    tableObj.value = array.map((item) => item[1]);
    tableObj.value.forEach((v) => {
      Object.keys(tableRenderConfig).forEach((k) => {
        if (v === k) {
          columns.value.push(tableRenderConfig[k]);
        }
      });
    });
  };
  const getData = async () => {
    renderData.value = [];
    isLoading.value = true;
    await sleep(2000);
    renderData.value = props.list;
    isLoading.value = false;
  };
  getData();
  gettableColums();
  const visible = ref(true);
  const allColumns = lodash.cloneDeep(columns);
  const emit = defineEmits(['handleOk']);
  const handleOk = () => {
    visible.value = false;
    emit('handleOk', visible.value);
  };
</script>
